<script  lang="ts">
import { defineComponent } from "vue";
import router from "@/router";

interface TypeOfYourItem {
  name: string,
  created_at: string,
  id: string,
}
export default defineComponent({
  props: {
    List: {
      type: Array<TypeOfYourItem>,
      default: [] as any[],
    },
    pageSize: {
      type: Number,
    },
    count: {
      type: Number,
    },
  },
  emits: ['pageChange'],
  setup(props, context) {
    const pageChange = (page: string) => {
      context.emit('pageChange', page)
      document.body.scrollTop = document.documentElement.scrollTop =  0
    }
    const LearnDatas = (id: string) => {
      router.push({
        path: `/NewsDetail`,
        query: {
          id: id,
        },
      });
    };
    return {
      pageChange,
      LearnDatas
    }
  }
})
</script>
    
    
<template>
  <div class="wishlist">
    <div class="wishlistHeader">新闻</div>
    <div v-if="List.length < 1" class="contentText">
      很抱歉，没有找到匹配项。
    </div>
    <div v-else class="productList">
      <el-row v-for="(item, index) in List" :key="index" class="productItem">
        <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20" class="info">
          <div class="text">
            <div class="route">{{ item.created_at }}</div>
            <div class="name">{{ item.name }}</div>
          </div>
        </el-col>

        <el-col :xs="0" :sm="0" :md="4" :lg="4" :xl="4" class="collect">
          <el-button
            class="el_bun btnStyle"
            type="primary"
            round
            size="large"
            @click="LearnDatas(item.id)"
            >了解更多
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div class="page">
      <el-pagination
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="count"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>
    
<style lang="scss" scoped>
.wishlist {
  padding: 0 20px;

  .wishlistHeader {
    padding: 30px 0;
    font-size: $userHeaderTitle;
    color: $auxiliaryColor;
    border-bottom: 1px solid #dfdfdf;
  }

  .contentText {
    margin-top: 20px;
  }

  .productList {
    width: 100%;

    .productItem {
      border-bottom: 1px solid #dfdfdf;
      padding: 20px 0;
      display: flex;
      justify-content: space-between;

      .info {
        display: flex;

        .image {
          width: 111px;
          height: 80px;
          border-radius: 10px;
          border: 1px solid #dadadd;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            padding: 5px 20px;
          }
        }

        .text {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          margin-left: 20px;
          font-size: $text;

          .route {
            color: $auxiliaryColor2;
          }

          .name {
            font-size: $userText;
            color: $auxiliaryColor;
            font-weight: bold;
          }

          .src {
            color: $mainColor;
          }
        }
      }

      .collect {
        display: flex;
        position: relative;
        font-size: $demand;

        .el_bun {
          transition: all 0.21s;
          opacity: 0;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }

    .productItem:hover {
      .collect {
        .el_bun {
          opacity: 1;
          transition: all 0.21s;
        }
      }
    }
  }

  .page {
    display: flex;
    justify-content: center;
    margin: 30px 0;
  }
}

.el-pager li {
  font-size: $text;
}

.iconfont {
  font-size: 40px;
  color: $mainColor;
}

#collection {
  color: #fff;
  font-size: 35px;
  background-color: $mainColor;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

@media screen and (max-width: 768px) {
  .collect {
    .el_bun {
      display: none;
    }
  }
}
</style>